/* 
  改文件是整个项目的入口文件

  完整版与阉割版 区别在于体积大小 是否有模板解析器

  总结：
  关于不同版本的Vue:
    1.Vue.js与vue.runtime.xxx.js的区别：
      (1).vue.js是完整版的Vue，包含：核心功能+模板解析器
      (2).vue.runtime.xxx.js是运行版的Vue,只包含：核心功能：没有模板解析器。

    2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置器，需要使用
      render函数接收到的createElement函数去指定具体内容。
*/

// 完整版Vue    核心+模板解析器
/*
  // 引入Vue
  import Vue from 'vue/dist/vue'
  // 创建Vue实例对象---vm
  new Vue({
    el: '#app',
    
    // 报错：
    // You are using the runtime-only build of Vue where the template compiler is not available. 
    // Either pre-compile the templates into render functions, or use the compiler-included build.
    // 提示：所使用的的版本是运行版的，不是完整版的
    // 一种解决办法是用render函数，一种是使用完整版

    // template: `<App></App>`,
    // components: { App } 
   
    template: `<h1>你好！</h1>`,
  }); 
*/

let person = {name: "Tom", age: 30};  // 故意写此行 测试是否关闭eslint 语法检查

// 阉割版Vue    核心
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'

new Vue({
  el: '#app',
  // 下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  // render: h => h(App),

  /* 
    render(createElement) {
      console.log(createElement);
      return createElement('h1', "你好！")
    } 
  */

  /* 
    因为没有用到this 所以改用箭头函数进行精简

    render: createElement => {
      // 因为h1是html固有标签，所以要分为两个参数
      // 如果是组件，则直接写入一个参数即可
      return createElement('h1', "你好！")
    } 
  */

  render: h => h(App)
});


// 关闭vue的生产提示
Vue.config.productionTip = false;

/* 
  new Vue({
    // 下面这行代码一会解释，完成了这个功能：将App组件放入容器中
    render: h => h(App),
  }).$mount('#app') 
*/
